<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <title>点评</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
    }
    
    h1 {
        text-align: center;
    }
    
    table {
        width: 600px;
        margin: 0 auto;
        border-collapse: collapse;
    }
    
    th,
    td {
        border: 1px solid black;
        text-align: center;
    }
    
    form {
        width: 600px;
        margin: 20px auto;
    }
    
    .star {
        background-image: url("star.png");
        width: 32px;
        height: 32px;
        float: left;
    }
</style>
<script>
    $(function() {
        var food = [];
        var tbody = $("tbody");
        var form = $("form");
        //展现数据
        var changeStar = function(stars, num) { //硪修改的星星div,点亮多少颗
            for (var i = 0; i < num; i++) {
                $(stars[i]).css("background-position", "0 -32px");
            }
            for (var i = num; i < stars.length; i++) {
                $(stars[i]).css("background-position", "0 0");
            }
        }
        var showlist = function(e) {
            tbody.empty();
            for (var i = 0; i < food.length; i++) {
                var tr = "<tr index=" + i + "><td>" + food[i].name + "</td><td>" + "<div index='1' class='star'></div><div index='2' class='star'></div><div index='3' class='star'></div><div index='4' class='star'></div><div index='5' class='star'></div>" + "</td><td>" + "<button class='btn-del'>删除</button>" + "</td></tr>";
                var jTr = $(tr);
                var stars = jTr.find(".star");
                stars.on("mouseenter", function(e) {
                    var star = $(this);
                    var stars = $(this).parent().find(".star");
                    var index = star.attr("index");
                    changeStar(stars, index);
                });
                stars.on("mouseleave", function(e) {
                    var star = $(this);
                    var index = star.parents("tr").attr("index");
                    var stars = $(this).parent().find(".star");
                    changeStar(stars, food[index].star);
                });
                stars.on("click", function(e) {
                    var star = $(this);
                    var index = star.parents("tr").attr("index");
                    var stars = $(this).parent().find(".star");
                    var starIndex = star.attr("index");
                    $.ajax({
                        url: "/changeStar",
                        method: "get",
                        data: {
                            index: index,
                            starIndex: starIndex
                        },
                        success: function(data) {
                            food[index].star = starIndex;
                            changeStar(stars, food[index].star);
                        }
                    })
                })
                changeStar(stars, food[i].star);
                tbody.append(jTr);

            }

            var btnDel = tbody.find(".btn-del")
            btnDel.on("click", function(e) {
                var index = $(this).parents("tr").attr("index");
                $.ajax({
                    url: "/del",
                    method: "get",
                    data: {
                        index: index
                    },
                    success: function(data) {
                        food = data;
                        showlist();
                    }
                })
            })


        }

        var btnAdd = $(".btn-add");
        btnAdd.on("click", function(e) {
            e.preventDefault();
            var newFood = {
                name: $(".food-name").val(),
                star: $(".food-star").val()
            };
            $.ajax({
                url: "/add",
                method: "get",
                data: {
                    newFood: newFood
                },
                success: function(data) {
                    food = data;
                    showlist();
                }
            })
        })
        var getFoodData = function() {
            $.ajax({
                url: "/getFoodData",
                method: "get",
                success: function(data) {
                    food = data;
                    showlist();
                }
            })
        }
        getFoodData();
    })
</script>

<body>
    <h1>小众点评</h1>
    <table>
        <thead>
            <th>商家名称</th>
            <th>星级</th>
            <th>操作</th>
        </thead>
        <tbody>

        </tbody>
    </table>
    <form>
        <label for="food-name">商家名称:</lable><input type="text" name="food-name" class="food-name"/>
        <label for="food-star">星级:</lable><input type="text" name="food-star" class="food-star"/>
        <button class="btn-add">增加</button>
    </form>
</body>

</html>

</html>